<template>

<!-- 播放组件 -->
  <div class="player" >
      <!-- 音乐播放控件 -->
    <audio
    autoplay

      @timeupdate="timeupdate"
      ref="player"
      @play="playState=true"
      @pause="playState=false"
      :src="`https://music.163.com/song/media/outer/url?id=${currentMusic.id}.mp3`"></audio>

    <div class="minibar">
      <!-- 左侧 -->
      <div class="left"  @click="isShowFull=true">
        <van-image round
        fit="cover"
        :style="{'animation-play-state':playState? 'running':'paused'}"
          :src="currentMusic.picUrl? currentMusic.picUrl:currentMusic.al.picUrl">
          <template v-slot:loading>
            <van-loading type="spinner"
              size="20" />
          </template>
        </van-image>
<div class="artists">
          <div>
           <span> {{currentMusic.name}}</span> - <span class="artists-name"
            v-for="artist in currentMusic.song.artists"
            :key="artist.id">{{artist.name}}</span>
          </div>

        </div>
      </div>

      <!-- 右边布局 -->
      <div class="right">
        <!-- 圆形进度条 -->
         <van-circle v-model="currentRate"
      :rate="rate"
      stroke-width="60"
      stroke-linecap="round"
      :text="text">
      <!-- 播放暂停图标 -->
    <div  @click="playState=!playState">
       <van-icon name="play" v-if="!playState" color="#fff" />
      <van-icon name="pause" v-else color="#fff"/>
    </div>
    </van-circle>

        <img class="img"
          src="~@/assets/音乐.png"
          alt=""
          @click="isShowPlayList =true">

      </div>
    </div>

     <!-- 弹出音乐层 -->
     <van-popup v-model="isShowFull" position="bottom" :style="{ height: '100%' }">

        <full-screen v-if="isShowFull" :currentMusic="currentMusic"
       :currentTime="currentTime" :totalTime="totalTime"
      :playState="playState"  @close="isShowFull=false" @changeTime="changeTime"
      @change-play ="ChangePlay"
      ></full-screen>
     </van-popup>

     <!-- 播放列表弹出层 -->
    <van-popup round v-model="isShowPlayList" position="bottom" :style="{ height: '30%',}" >
     <!-- 播放列表组件 -->
     <play-list></play-list>
    </van-popup>
  </div>

</template>

<script>

import { mapState } from 'vuex'
import fullScreen from './full-screen.vue'
import PlayList from '@/components/Play-List.vue'
// import { singerDetails } from '@/api/singer.js'
export default {
  components: { fullScreen, PlayList },
  name: 'playButton',
  data () {
    return {
      currentRate: 0, // 表示动画过程中的实时进度
      rate: 100, // 进度条的目标进度
      // curPic: '',
      playState: true, // 控制播放状态
      isShowFull: false, // 控制弹出层
      currentTime: 0, // 当前时间
      totalTime: 0,
      audio: [],
      isShowPlayList: false // 是否展示播放列表
    }
  },
  watch: {
    // 侦听播放状态
    playState (newVal) {
      if (newVal) {
        this.$refs.player.play()
      } else {
        this.$refs.player.pause()
      }
    }
  },
  computed: {
    ...mapState(['currentMusic']),

    text () {
      return this.currentRate.toFixed(0) + '%'
    }
  },
  async created () {
    // 获取音频
    const { data: res } = await this.$http.get(`/song/url?id=${this.currentMusic.id}`)
    console.log(res.data)
    this.audio = res.data

    this.$refs.player.volume = 0.05
  },
  methods: {
    // 改变时间音乐进度也改变
    changeTime (event) {
      // console.log(event)
      this.$refs.player.currentTime = event
    },
    // 播放时触发
    timeupdate (e) {
      const ctime = e.target.currentTime // 当前时间
      const total = e.target.duration // 总时间
      this.currentRate = ctime * 100 / total // 当前实时进度
      this.rate = (100 * 100) / total //
      // console.log(this.currentRate, this.rate)

      // 当期的时间
      this.currentTime = ctime
      // 总时间
      this.totalTime = total
    },
    ChangePlay (e) {
      this.playState = e
    }
  }

}
</script>

<style lang="less" scoped>

.van-circle{
  position: relative;
  // background-color: green;
  .van-icon{
    position: absolute;
    top: 52%;
    left: 51%;
    transform: translate(-50%,-50%);
  }
}
.player{
  border-radius: 50px;
  position: sticky;
  bottom: 0;
  z-index: 4;
  width: 100%;
  // height: 50px;

  .minibar{
     padding: 0 10px;
     display: flex;

    justify-content: space-between;
      .left{
        display: flex;
      justify-content: center;
        align-items: center;
        .van-image{
          width: 50px;
          height: 50px;
          animation: rote 4s linear infinite;
        }
      @keyframes rote {
        0%{
          transform: rotate(0deg);
        }
        100%{
          transform: rotate(360deg);
        }
      }

      .artists{
          font-size: 16px;
          color: rgb(66, 63, 63);
         padding: 0 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 1;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
      }
    }

    .right{
      display: flex;
      justify-content: center;
      align-items: center;

      .van-circle{
       height: 27px;
       width: 27px;
        }
      .van-icon{
        font-size: 20px;
      }

        .img{
          width: 40px;
          height: 40px;
          margin-left: 3px;
          padding-top: 6px;
        }
    }
  }
}
.van-popup{
  background-color: #dbdbdb;
}

</style>
